<template>
  <div>
    <!-- <h1>hello vue</h1> -->
    <!-- 
      侦听器watch
      作用：侦听data/computed数据值的变化
      语法：
      watch: {
        "被侦听的属性名":{
          deep: true, // 深度侦听复杂数据类型
          immediate: true, // 立即执行
          handler(newVal,oldVal){ // 获取新的值

          }
        }
      }
     -->
     <input v-model="user.name" type="text">
     <input v-model="user.age" type="text">
  </div>
</template>

<script>
export default {
  data(){
    return {
      user: {
        name: "",
        age: 12
      }
    }
  },
  watch: {
    // user(newVal,oldVal){
      // 侦听不到对象中数据的变化
    //   console.log(newVal,oldVal);
    // }
    user:{
      immediate: true, // 立即侦听，程序运行的时候立刻触发侦听器
      deep: true, // 深度侦听
      handler(newVal, oldVal){
        console.log(newVal, oldVal);
      }
    }
  }
}
</script>

<style>

</style>